<template>
  <div class="search-fom-box">
    <el-row>
      <el-col :span="24">
        <slot name="showSearch" />
        <el-button type="text" style="margin: 0 10px" @click.native="handleShowSearchMore" v-show="showMoreBtn">更多</el-button>
        <slot name="searchBtn" />
      </el-col>
    </el-row>
    <el-row v-show="showSearchMore">
      <slot name="hideSearch" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'SearchFormBox',
	props: {
	  showMoreBtn: { // 显示更多按钮
	    type: Boolean,
	    default: true
	  }
	},
  data() {
    return {
      showSearchMore: false
    }
  },
  methods: {
    // 更多搜索
    handleShowSearchMore() {
      this.showSearchMore = !this.showSearchMore
    }
  }
}
</script>

<style scoped lang="scss">

</style>
